/*
 * Copyright © 2015-2018 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import (less) "./fonts.less"; // must be first to support external @import (css)
@import (less) "./variables.less";
@import (less) "../../node_modules/@bower_components/bootstrap/less/mixins.less";
@import (less) "./modals.less";

/*
NOTE: Need to have these definitions here so that these CSS variables have default
values in Angular apps
*/
:root {
  --brand-primary-color: @brand-primary-color;
  --navbar-color: @navbar-bg;
  --font-family: @bootstrap4-font-family; // Bootstrap 4 base font
}

html {
  position: relative;
  min-height: 100%;
  font-size: @root-font-size;
}

body {
  // visibility: hidden; // themes start the show
  margin-bottom: 80px;
  font-family: var(--font-family);

  .dropdown-menu {
    > li > a,
    > li.dropdown-header {
      padding-left: 14px;
    }
    > li > a > span.fa-fw { margin-right: 5px; }
    &.typeahead {
      cursor: default;
      max-height: 200px;
      overflow: auto;
    }
  }
  div.progress { margin: 1px; /* by default they have just margin-bottom: 20px */ }

  main.container {
    > div { margin-bottom: 80px; }
    .sidebar {
      ul li a {
        display: block;
        &.abstract {
          &.pull-left { width: 80%; }
          // Create namespace "+"
          + a {
            display: inline-block;
            width: 20%;
          }
        }
      }
    }
  }
}

.caret {
  border-width: 6px 6px 0 6px;
  margin-bottom: 1px;
}

.alerts {
  position: absolute;
  z-index: 999;
  top: 90px;
  left: 0;
  right: 0;
  .message-content {
    color: white;
  }
}

body.state-login .alerts {
  top: 0;
}

.modal {
  &.center {
    .modal-dialog {
      position: fixed;
      top: 40%;
      left: 50%;
      min-width: 320px;
      max-width: 630px;
      width: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
  .modal-body {
    max-height: 75vh;
    overflow: auto;
    .alerts {
      position: fixed;
    }
  }
}

.modal-backdrop {
  // see https://github.com/twbs/bootstrap/pull/14724
  z-index: ( @zindex-modal - 1 );
  height: 100%;
}

fieldset {
  &.row { margin-bottom: 1px; }
  &.tab-pane {
    padding-top: 1em;
    &.am-fade.active-add {
      // cf http://mgcrea.github.io/angular-strap/##tabs-usage
      animation-name: fadeIn;
    }
  }
}

span.fa-asterisk {
  color: @brand-danger;
  font-size: 11px;
}

.form-control {
  &.ng-dirty.ng-invalid {
    border-color: #a94442;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    &:focus {
      border-color: #843534;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
    }

    @media (max-width: @screen-xs-max) { margin-bottom: 1px; }
  }
}

span.text-info[bs-tooltip] { cursor: help; }
hr { border-color: lighten(@text-color, 50%); }
.jumbotron { margin-top: 1em; }
.nav-tabs > li > a { cursor: pointer; }

footer.app-footer {
  font-size: 14px;
  position: absolute;
  bottom: 0;
  z-index: 999;
  width: 100%;
  > .container {
    padding-right: 15px;
    padding-left: 15px;
  }
  div.text-muted {
    margin: 10px 0;

    > div {
      @media (min-width: @screen-md-max) {
        &:first-child { text-align: left; }
        &:last-child { text-align: right; }
      }

      @media (max-width: @screen-md-max) { text-align: center; }
    }
  }
  img {
    height: 26px;
    width: 26px;
    margin-right: 8px;
  }
  p,
  ul {
    height: 32px;
    margin: 0;
  }
  span,
  li {
    line-height: 32px;
    vertical-align: middle;
  }
}

.mapreduce-components {
  margin-top: 15px;

  .run-status-box {
    background: darken(white, 10%);
    margin-left: 0;
    border-radius: 4px;

    .item {
      border-right: 1px solid #93969f;
      min-height: 60px;
      padding-top: 15px;
      text-align: left;

      &:last-child {
        border-right: 0;
      }

    }
  }

  .component-box {
    .task-item {
      width: 12.5%;
      float: left;
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
    }
  }

}

.breadcrumb {
  margin: 0;
  padding: 0;
}

[cdap-object-heading] {
  margin-top: 20px;
}

.btn-cdap {
  background-color: @cdap-button;
  color: #ffffff;

  &:hover,
  &:active,
  &:focus {
    color: #ffffff;
  }
}

// The modeless-container doesn't have an overflow property defined here
// In all our usecases we don't have the entire modeless scrolling since we have
// a static header and a footer and only the content scrolls.
.modeless-container {
  background: @grey-06;
  position: absolute;
  z-index: 999;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
  color: @grey-01;
  background-color: white;
  margin-bottom: 60px;

  .modeless-header {
    background-color: @grey-08;
    height: 60px;
    padding: 0;
    border-radius: 4px 4px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid @grey-05;
    border-radius: 0;

    .modeless-title {
      color: @grey-01;
      padding-left: 15px;
      max-width: 80%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-weight: 500;
      margin: 0 auto 0 0;
      font-size: 16px;
      line-height: 20px;
    }

    .btn .fa-remove,
    .btn .icon-close {
      color: @grey-01;
      width: 16px;
      height: 16px;
      font-size: 16px;
      margin-right: 5px;
    }
  }

  .modeless-content {
    display: flex;
    height: ~"-moz-calc(100% - 60px)";
    height: ~"-webkit-calc(100% - 60px)";
    height: ~"calc(100% - 60px)";
  }
}

@maxGridHeight: 200px;
@minGridWidth: 10px;
@maxGridWidth: 1fr;
@headerBgColor: white;
@borderColor: @grey-04;
@header-light-color: @grey-04;

/* This is the fallback for browsers that doesn't support css grid */

.grid.grid-container {
  display: table;
  width: 100%;
  border-collapse: collapse;

  &.disabled,
  &.disabled * {
    cursor: not-allowed !important;
  }

  .grid-row {
    width: 100%;
    display: table-row;
    > strong,
    > div {
      display: table-cell;
    }
  }
  .grid-header {
    display: table-header-group;
    .grid-row {
      > * {
        display: table-cell;
        padding: 10px;
      }
    }
  }
  .grid-body {
    display: table-row-group;
    .grid-row {
      &:hover {
        background: @grey-08;
      }
      &:first-of-type > div { border-top: 0; }
      &:last-of-type > div { border-bottom: 0; }
    }
  }
}

/* End of css grid fallback */

.grid {
  &.grid-container {
    max-height: @maxGridHeight;
    overflow-y: auto;
    display: grid;

    &.border-top-bottom {
      border-top: 2px solid @borderColor;
      border-bottom: 2px solid @borderColor;

      .grid-body > .grid-row:last-child {
        border-bottom: 0;
      }
    }

    &.disabled,
    &.disabled * {
      cursor: not-allowed !important;
    }

    .grid-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(@minGridWidth, @maxGridWidth));

      > strong,
      > div {
        border-left: 0;
        border-bottom: 0;
        padding: 5px;
        max-width: 100%;
        overflow: hidden;
        word-break: inherit;
        text-overflow: ellipsis;
      }
    }
    .grid-header {
      position: sticky;
      display: grid;
      top: 0;
      background: @headerBgColor;
      > .grid-row {
        border-bottom: 1px solid @grey-04;
        padding: 0;
        border-left: 0;
        border-right: 0;
        border-top: 0;
      }

      &.header-light {
        color: @header-light-color;
      }
    }
    .grid-body {
      display: grid;
      .grid-row {
        padding: 7px 5px;
        align-content: center;
        align-items: center;
        border-bottom: 1px solid @grey-04;
        &.grid-link {
          cursor: pointer;
        }
        &:hover {
          background: @grey-08;
        }
        &.highlighted {
          border: 2px solid @green-03;
          background-color: fade(@green-03, 10%);
        }
      }
      a {
        text-decoration: none;
      }
    }
  }
}

.grid.grid-container.grid-compact {
  .grid-header,
  .grid-body {
    .grid-row > div {
      padding: 5px 7px;
    }
  }

  .grid-header {
    background: @grey-08;
    color: @grey-02;
    font-weight: 600;
  }

  .grid-row {
    border-bottom: 1px solid @grey-06;
    min-height: 29px;
    padding: 0;
  }

  .grid-body .grid-row > div {
    border-right: none;
  }
}

/* Truncate text with ellipsis helper */
.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
